<template>
	<el-form ref="form" 
	:model="form" 
	label-position="left" 
	label-width="140px" 
	:hide-required-asterisk="true" 
	align="center">
		<el-form-item label="姓名">
			<span>{{form.name}}</span>
		</el-form-item>
		<el-form-item label="性别">
			<span>{{form.sex}}</span>
		</el-form-item>
		<el-form-item label="身份证号码">
			<span>{{form.idCard}}</span>
		</el-form-item>
		<el-form-item label="出生日期">
			<span>{{form.birthday}}</span>
		</el-form-item>
		<el-form-item label="电话">
			<span>{{form.phone}}</span>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: "小明",
					sex: "男",
					idCard: "12345678909",
					birthday: "1999-09-09",
					phone: "123343546"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-form {
		border: 1px solid #E4E7ED;
		border-radius: 4px;
		width: 60%;
		margin: 50px auto;

		/deep/ .el-form-item {
			border-bottom: 1px solid #E4E7ED;
			margin-bottom: 0px;

			&:last-child {
				border-bottom: none;
			}

			.el-form-item__label {
				border-right: 1px solid #E4E7ED;
				padding: 12px 0 12px 20px;
			}

			.el-form-item__content {
				padding: 8px 0px 0px;

				>* {
					padding: 0 20px;
				}

				.el-form-item__error {
					top: 42px
				}
			}

			.el-input__inner {
				margin-bottom: 0px;
			}
		}
	}
</style>
